<template>
  <a
    v-for="(person, index) in personList"
    :key="index"
    class="card-container px-[15px] rounded-lg block mt-[15px] bg-[#fff]"
    :href="`#/person/detail?id=${person.id}`"
  >
    <Name class="border-solid border-b border-[#e9e9e9]" :person="person" />
    <div class="py-1 text-sm text-[#333] leading-[22px]">
      <p class="truncate">{{person.mch_name}}</p>
      <p>身份证号：{{person.id_card}}</p>
      <p>联系电话：<a :href="`tel:${person.phone}`" class="text-[#2e7cff]"><van-icon name="phone-circle-o" class="mr-1.5" />{{person.phone}}</a></p>
    </div>
    <div class="flex justify-between items-center text-sm text-[#333] pb-4">
      <div>
        <p class="flex-1">类型：<span class=" text-[#ff6029]">{{reaseonMap[person.isolate_reason] || person.isolate_reason}}</span></p>
        <p class="flex-1" v-if="person.isolate_status">状态：<span :class="String(person.isolate_status) === '2' ? 'text-[#00d550]' : 'text-[#ffc844]'">{{isolate_status_obj[person.isolate_status]}}</span></p>
        <!-- <a class="text-[#2e7cff] hover:text-[#3c85ff] text-xl" @click.prevent="$emit('operate', {{person, index}})">
          <van-icon name="ellipsis" />
        </a> -->
      </div>
      <div class="flex justify-end items-center py-3">
        <template v-if="String(person.confirm_status) === '1' || String(person.confirm_status) === '3'">
          <a class="h-[25px] w-[72px] rounded-full border border-solid border-[#578fec] bg-[#e1ecff] text-[#578fec] active:bg-[#f1f5fd] text-sm flex justify-center items-center" @click.prevent="$emit('operate', {person, index, type: 'accept'})">确认接收</a>
          <a v-if="String(person.confirm_status) !== '3'" class="h-[25px] w-[72px] rounded-full border border-solid border-[#578fec] bg-[#e1ecff] text-[#578fec] active:bg-[#f1f5fd] text-sm flex justify-center items-center ml-1.5" @click.prevent="$emit('operate', {person, index, type: 'rejected'})">驳回请求</a>
        </template>
        <template v-else>
          <a v-if="String(person.isolate_status) === '1'" class="h-[25px] w-[72px] rounded-full border border-solid border-[#578fec] bg-[#e1ecff] text-[#578fec] active:bg-[#f1f5fd] text-sm flex justify-center items-center ml-1.5" @click.prevent="$emit('operate', {person, index, type: 'extend'})">延长隔离</a>
          <a v-if="String(person.isolate_status) === '1'" class="h-[25px] w-[72px] rounded-full border border-solid border-[#578fec] bg-[#e1ecff] text-[#578fec] active:bg-[#f1f5fd] text-sm flex justify-center items-center ml-1.5" @click.prevent="$emit('operate', {person, index, type: 'relieve'})">解除隔离</a>
          <a v-if="String(person.isolate_status) === '2'" class="h-[25px] w-[72px] rounded-full border border-solid border-[#578fec] bg-[#e1ecff] text-[#578fec] active:bg-[#f1f5fd] text-sm flex justify-center items-center ml-1.5" @click.prevent="$emit('operate', {person, index, type: 'household'})">居家隔离</a>
        </template>
      </div>
    </div>
  </a>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import Name from './Name.vue'
import { Person } from '@/types/person'
import { usePersonStore } from '@/store/person'
import { useGlobalStore } from '@/store/global'
import { useRouter } from 'vue-router'
import { usePersonEffect } from '../hooks/usePersonEffect'

export default defineComponent({
  name: 'List',
  components: {
    Name,
  },
  props: {
    personList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const router = useRouter()

    const personStore = usePersonStore()
    const globalStore = useGlobalStore()
    
    const personList = computed(() => props.personList as Person[])
    const loading = computed(() => props.loading)
    const isolate_status_obj = computed(() => personStore.isolate_status_obj)
    const confirm_status_obj = computed(() => personStore.confirm_status_obj)
    const pagination = computed(() => personStore.pagination)
    const { current_page, total_pages } = pagination.value

    // const personTypeList = computed(() => globalStore.personTypeList)
    // TODO:删除默认
    const personTypeList = [
    { "id": '1', "name": "重要人员" },
    { "id": '2', "name": "外来人员" },
    { "id": '3', "name": "特殊人员" }
]
    const reaseonMap = {}
    personTypeList.forEach(reason => {
      reaseonMap[reason.id] = reason.name
    })

    return {
      loading,
      personList,
      isolate_status_obj,
      confirm_status_obj,
      current_page,
      total_pages,
      reaseonMap,
    }
  }
})
</script>

<style lang="scss" scoped>
.card-container{
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.15)
}
</style>
